<template>
    <div id="to-invite">
        <!-- 去邀请好友 -->
        <div class="invite-content">
          <div class="top-bg">
              <van-nav-bar class="header" fixed :border="false" @click-left="diffBack">
                      <div class="left"
                          slot="left">
                          <van-icon name="arrow-left"
                                  size="24px"
                                  color="#fff" />
                      </div>
                  </van-nav-bar>
          </div>
          <div class="reset-wrapper">
              <div class="reset-content">
                <div class="top-header">
                  <div class="decoration-icon">
                    <img src="@/assets/img/designer/personalCenter/decoratingiconl.png" alt="">
                  </div>
                  <div class="header-mid">
                    扫码邀请
                  </div>
                  <div class="decoration-icon" style="text-align:right;">
                    <img src="@/assets/img/designer/personalCenter/decoratingiconr.png" alt="">
                  </div>
                </div>
                <div class="code-case">
                <div class="case">
                    <canvas id="canvas"></canvas>
                </div>
                </div>
                <div class="share-btn" @click="toShare" >
                  <div>去微信邀请</div>
                </div>
              </div>
          </div>
      </div>
    </div>
</template>
<script>
import QRCode from 'qrcode'
export default {
  components: {
    QRCode: QRCode
  },
  data() {
    return {
      title: '',
      qrlink: 'http://share.tuxiaozhu.com'
    }
  },
  created() {
    this.updateSerivces()
  },
  mounted(){
     this.useqrcode()
  },
  methods: {
    diffBack() {
        this.$router.go(-1)
    },
    // 二维码
    useqrcode(){
      var canvas = document.getElementById('canvas')
      QRCode.toCanvas(canvas,this.qrlink, {width:175,height:175},function (error) {
        if (error) console.error(error)
      })
    },
    // 分享微信 朋友圈
    toShare(){
        this.shareHref()
    },
    /**
     * 分享按钮点击事件
     */
    shareHref() {
        let _this = this
        var ids = [{
                id: "weixin",
                ex: "WXSceneSession"  /*微信好友*/
            }, {
                id: "weixin",
                ex: "WXSceneTimeline" /*微信朋友圈*/
            }],
            bts = [{
                title: "发送给微信好友"
            },{
                title: "分享到微信朋友圈"
            }];
        window.plus.nativeUI.actionSheet({
                cancel: "取消",
                buttons: bts
            },
            function(e) {
                var i = e.index;
                if (i > 0) {
                    _this.shareAction(ids[i - 1].id, ids[i - 1].ex);
                }
            }
        );
    },
    // 更新分享服务
    updateSerivces() {
        let _this = this
        window.plus.share.getServices(function(s) {
            _this.shares = {};
            for (var i in s) {
                var t = s[i];
                _this.shares[t.id] = t;
            }
            _this.outSet("获取分享服务列表成功");
        }, function(e) {
            _this.outSet("获取分享服务列表失败：" + e.message);
        });
    },
    // 分享操作
    shareAction(id, ex) {
        var s = null;
        if (!id || !(s = this.shares[id])) {
            this.outLine("无效的分享服务！");
            return;
        }
        if (s.authenticated) {
            this.outSet("---已授权---");
            this.shareMessage(s, ex);
        } else {
            this.outSet("---未授权---");
            s.authorize(function() {
                this.shareMessage(s, ex);
            }, function(e) {
                this.outLine("认证授权失败");
            });
        }
    },
    // 发送分享消息
    shareMessage(s, ex) {
        var msg = {
            href: this.qrlink,
            title: '效果图上门服务平台',
            content: '效果图上门服务开创者，按小时收费，费用低至6折。',
            thumbs: [require('@/assets/img/public/appiconshare.png')],
            pictures: [require('@/assets/img/public/appiconshare.png')],
            extra: {
                scene: ex
            }
        };
        s.send(msg, function() {
            this.outLine("分享成功!");
        }, function(e) {
            this.outLine("分享失败!");
        });
    },
    // 控制台输出日志
    outSet(msg) {
        console.log(msg);
    },
    // 界面弹出吐司提示
    outLine(msg) {
        // this.warmTips = true
        // this.warmMsg  = "msg"
        window.plus.nativeUI.toast(msg)
    }
  }
};
</script>
<style lang="scss" scoped>
#to-invite {
    position: absolute;
    width: 100%;
    height: 100%;
    .invite-content{
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url(../../../../assets/img/designer/personalCenter/imgbackground.png);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% 100%;
        .top-bg{
            width: 100%;
            background: #fff;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            .header {
                background: transparent;
                color: #ffffff;
                height: 0.92rem;
            }
        }
        .reset-wrapper{
            position: fixed;
            width: 100%;
            padding: 0.4rem;
            box-sizing: border-box;
            top: 4.15rem;
            bottom: 0;
            left: 0;
            right: 0;
            overflow-y: scroll;
            bottom: 1.2rem;
            .reset-content{
               width: 100%;
               background-image: url(../../../../assets/img/designer/personalCenter/sonbackground.png);
               background-repeat: no-repeat;
               background-position: 0 0;
               border-radius: 0.4rem;
               padding-bottom: 0.6rem;
                .top-header{
                  width: 100%;
                  padding: 0 0.55rem;
                  box-sizing: border-box;
                  div{
                    margin-top: 0.4rem;
                    display: inline-block;
                  }
                  .decoration-icon{
                    width: 30%;
                    height: 0.42rem;
                    line-height: 0.42rem;
                    img{
                      width: 1.25rem;
                      height: 0.25rem;
                      vertical-align: middle;
                    }
                  }
                  .header-mid{
                    width: 40%;
                    text-align: center;
                    color: #5E8EFE;
                    font-size: 0.42rem;
                    font-family: PingFangSC-Semibold;
                    font-weight: 600;
                  }
                }
                .code-case{
                    width: 100%;
                    .case{
                        margin: 0 auto;
                        margin-top: 0.6rem;
                        width: 3.38rem;
                        height: 3.38rem;
                        border: 0.04rem dashed #5E8EFE;
                        box-sizing: border-box;
                        #canvas{
                            width: 3.3rem!important;
                            height: 3.3rem!important;
                            margin: auto;
                        }
                    }
                }
                .share-btn{
                  margin-top: 0.6rem;
                  div{
                    width: 3.51rem;
                    height: 0.88rem;
                    margin: 0 auto;
                    background: #5E8EFE;
                    border-radius: 0.1rem;
                    line-height: 0.88rem;
                    font-size: 0.26rem;
                    font-weight: 600;
                    font-family: PingFangSC-Semibold;
                    color: #fff;
                    text-align: center;
                  }
                }
            }
        }
    }
}
</style>
